@import "_rubrics_variables";

.#{$namespace}sakai-rubrics {

    .rubric-title {
        background: $rubrics-title-bg;
        padding: 20px;
        border: $rubrics-title-border-size solid $rubrics-title-border-color;
        border-width: $rubrics-title-border-size 0px;
        font-weight: bold;
        position: relative;
        @include display-flex;
        @include justify-content(space-between);

        div {
            font-weight: normal;
            flex: 1;
        }

        .rubric-name {
            cursor: default;
            color: $rubrics-link-color;
            text-decoration: none;
        }

        .icon-spacer {
            margin-left: 3px;
        }

        &:hover, &.active, &:focus {
            background: $rubrics-title-active-bg;
        }

        .actions {
            width: 100px;
            float: right;

            .action-container {
                display: inline-block;

                @media #{$desktop} {
                    padding-left: 1px;
                    padding-right: 1px;
                    border-right: 2px solid $rubrics-title-border-color;

                    > span {
                        font-weight: normal;
                    }

                    &:last-of-type {
                        padding-right: 0;
                        border-right: 0;
                    }
                }
            }
        }

        .highlight {
            color: var(--sakai-highlight-color);
            &.bold {
                font-weight: bold;
            }
        }

        button.draft {
            &.disabled > span.highlight{
                filter: brightness(60%);
            }
        }
    }

    .btn.add-rubric {
        color: $rubrics-link-color;
    }

    .rubric-details {
        padding-top: $standard-spacing;
        padding-inline: $standard-spacing;
        .weighted-grade-info {
            display: flex;
            margin: 0 2px 15px 2px;
            @media #{$phone} {
                flex-direction: column;
            }
            .total-data {
                margin: 5px 25px 0 0;
                min-width: 256px;
                .bold-header {
                    font-weight: 600;
                    margin-right: 4px;
                }
            }
            .total-data > div {
                margin-bottom: 4px;
            }
            .banner-container {
                display: flex;
                flex-grow: 1;
                .sak-banner-success:not(.hidden) ~ div:not(.hidden) {
                    display: none;
                }
            }
            .sak-banner-error,
            .sak-banner-success,
            .sak-banner-warn {
                height: fit-content;
                flex-grow: 1;
                margin: 0;
            }
        }
        .action-buttons {
            margin-bottom: $standard-spacing;
        }
    }

    .rubric-title-sorting {
        background-color: var(--sakai-background-color-3);
        border-width: $rubrics-title-border-size 0px;
        @include display-flex;
        @include justify-content(space-between);

        div {
            font-weight: normal;
            flex: 1;
        }
    }

    .linkStyle {
        text-decoration: none;
    }

}


/** External to the tool **/
.sakai-rubric-association {
    .disabled {
        label {
            color: $rubrics-disabled-label-color;
        }
    }

    .rubrics-list {
        padding-left: 20px;
    }

    select.form-control {
        @include appearance(none);
        padding: 0px 30px 0px 5px;
        width: auto;
        display: inline-block;
        margin: 0 20px 10px 0;

        #rubricslist {
            display: inline-block;
        }
    }
}

.criterion {
    &.sakai-rubric-criterion,
    &.sakai-rubric-criterion-preview,
    &.sakai-rubric-criteria-grading,
    &.sakai-rubric-criterion-student,
    &.sakai-rubric-criterion-readonly {
        width: 100%;
        margin-bottom: 15px;
        border-bottom: $rubrics-crit-border-size solid $rubrics-crit-border-color;

        .criterion-row {
            width: 100%;
            height: 100%;
            display: table;
            border: $rubrics-crit-border-size solid $rubrics-crit-border-color;
            border-width: $rubrics-crit-border-size 0 0 0;

            .div-description{
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .cr-table{
                table-layout: fixed;
            }

            &.criterion-group {
                margin-top: 10px;
                position: relative;

                &::before {
                    background: $rubrics-crit-border-color;
                    content: " ";
                    height: $rubrics-crit-border-size;
                    position: absolute;
                    top: -11px;
                    width: 100%;
                }

                &:first-of-type {
                    margin-top: 0;

                    &::before {
                        display: none;
                    }
                }
            }

            .criterion-detail {
                position: relative;
                padding: $standard-spacing;
                display: table-cell;
                vertical-align: top;
                background: $rubrics-crit-detail-bg;
                width: 20%;
                border-right: $rubrics-crit-border-size solid $rubrics-crit-border-color;

                &.criterion-title {
                    width: 95%;
                }

                p {
                    margin: 0;
                    padding: 0;
                    font-size: 11px;
                    color: $rubrics-crit-detail-color;
                }
            }

            .reorder-icon {
                cursor: grab;

                &:active {
                    cursor: grabbing;
                }
            }

            .add-criterion-item {
                display: block;
                position: absolute;
                padding-top: 5px;
                right: -10px;
                top: 0;
                bottom: 0;
                width: 20px;
                z-index: 5;
                button {
                    background-color: transparent !important;
                    border-color: transparent !important;
                    border-width: 0 !important;
                    padding: 0 !important;
                    margin: 0 !important;
                    span {
                        pointer-events: none;
                    }
                }
            }

            &:hover, &.active {

                sakai-rubric-criterion-edit {
                    display: inline-block;
                }

                .criterion-ratings {
                    .rating-item {
                        sakai-rubric-criterion-rating-edit {
                            visibility: visible;
                        }
                    }
                }
            }

            .criterion-ratings {
                display: table-cell;
                vertical-align: top;
                width: 70%;
                height: 100%;

                .cr-table {
                    display: table;
                    width: 100%;
                    height: 100%;

                    .cr-table-row {
                        display: table-row;
                        height: 100%;
                    }
                }

                .rating-item {
                    position: relative;
                    display: table-cell;
                    padding: 5px;
                    height: 100%;
                    border-right: $rubrics-crit-border-size solid $rubrics-crit-border-color;

                    p {
                        margin: 0;
                        padding: 0;
                        font-size: 11px;
                        color: $rubrics-item-color;
                    }

                    .points {
                        color: $rubrics-item-points-color;
                        font-style: italic;
                    }

                    .popover {
                        max-width: 300px;
                    }
                }
            }

            .criterion-actions {
                padding: $standard-spacing;
                display: table-cell;
                background: $rubrics-crit-actions-bg;
                width: 10%;
                position: relative;
            }
        }

        .criterion-title, .criterion-item-title {
            font-size: 16px;
            color: $rubrics-crit-title-color;
            font-weight: bold;
            margin: 0;
            padding: 0;

            &.criterion-item-title {
                font-weight: normal;
                color: $rubrics-crit-item-title-color;
            }
        }
        .criterion-weight {
            margin-bottom: -5px;
            margin-top: 5px;
            display: flex;
            align-items: center;
            flex-wrap:wrap;
            > span {
                &:first-child {
                    font-size: 12px;
                    margin-right: 8px;
                }
                &:last-child {
                    font-size: 12px;
                }
            }
        }

        .weight-field {
            .field-item {
                margin-top: 10px;
                margin-bottom: -5px;
                &.form-group {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    flex-wrap: wrap;
                    > {
                        label {
                            margin: 0;
                            font-weight: inherit;
                            margin-right: 5px;
                        }
                        input {
                            max-width: 60px;
                            text-align: center;
                            margin-right: 5px;
                        }
                        span {
                            font-size: 12px;
                        }
                    }
                }
            }
        }

        &.grading {
            .rating-item {
                cursor: default;

                &:hover:not(.student), &:focus:not(.student) {
                    background: $rubrics-rating-hover-bg;
                }

                &.selected {
                    background: $rubrics-rating-selected-bg;
                }
            }

            .fine-tune-points {
                min-width: 75px;
            }

            strong.points-display {
                display: block;
                padding: 2px;
                text-align: center;

                &.strike {
                    text-decoration: line-through;
                }
            }
        }
    }

    &.sakai-rubric-criteria-grading,
    &.sakai-rubric-criterion-student {
        .criterion-group {
            .criterion-detail {
                border-right: 0;
                width: 100%;
            }
        }
    }

    &.sakai-rubric-criterion-readonly,
    &.sakai-rubric-criterion-preview,
    &.sakai-rubric-criteria-grading {
        .criterion-group {
            .criterion-detail {
                width: 100%;
            }
        }
    }
}

div.weight-error {
    label, span {
        color: var(--errorBanner-color);
    }
    input {
        border-color: var(--errorBanner-color);
    }
}

.rubric-totals {
    &.sakai-rubric-criterion-grading,
    &.sakai-rubric-criterion-student {
        text-align: right;
        padding: 5px $standard-spacing;
    }
}

sakai-rubric-grading {
    .rubric-details.grading {
        > h3 {
            margin-bottom: 10px;
        }
        .criterion.sakai-rubric-criteria-grading {
            margin-bottom: 10px;
            .criterion-ratings {
                margin-bottom: 15px;
            }
        }
    }
    .rubric-totals {
        margin: 10px 0px 10px 0px;
    }
}

sakai-rubric-grading-comment,
sakai-rubric-student-comment {

    button > i {
        margin: 5px auto;
        font-size: 16px;
        text-align: center;
        width: 100%;
        &.active {
            color: var(--sakai-color-orange);
            background-color: unset;
        }
    }

    div.rubric-comment-body {
        min-width: 180px;
    }
}

.rubric-criterion-comment-title {
    font-weight: bold;
    margin-bottom: 20px;
}

.rubric-tab-content {
    display: none;
}

.rubrics-visible {
    display: block;
    margin-bottom: 1em;
}

.rubrics-tab-button {
    border: 1px solid var(--sakai-border-color);
    width: 14em;
    padding: 8px;
    display: inline-block;
    text-align: center;
    border-radius: 4px 4px 0 0;
    background: var(--sakai-background-color-2);

    &:hover {
        cursor: pointer;
    }
}

.rubrics-tab-row {
    margin-bottom: 1em;
}

a.rubrics-tab-selected {
    border-bottom: none;
    background: var(--sakai-background-color);
    pointer-events: none;
    text-decoration: none;

    &:hover {
        cursor: default;
    }
}

.rubrics-summary-average-cell {
    border-left-style: double;
    border-left-width: 3px;
}

.rubrics-summary-average-row {
    border-top-style: double;
    border-top-width: 3px;
}

.summary-rating-name {
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2em;
    font-weight: normal;
    font-style: italic;
}

div.collapse-toggle-buttons > button {
    padding: 0.5rem;
}

sakai-rubric-summary{
    div.summary-top-card {
        margin-top: 1em;
    }
    div.card-body {
        background-color: var(--sakai-background-color-2);
    }
}

.label-rubrics {
    font-weight: bold;
}

sakai-rubric-grading-button span.has-evaluation {
    color: green;
}

@mixin small_screen_rubric_layout {
  sakai-rubric,
  sakai-rubric-readonly,
  sakai-rubric-grading,
  sakai-rubric-student {
      .rubric-title {
          .actions {
              @include display-flex;
              .action-container {
                  text-align: center;
              }
          }
      }

      .rubric-details {
          .criterion .criterion-row,
          .criterion.sakai-rubric-criterion-readonly .criterion-row {
              @include display-flex;
              @include flex-direction(column);
              width: 100%;
              border-width: 1px 0;
              &.criterion-group {
                  @include flex-direction(row);
                  .criterion-actions {
                      width: auto;
                  }
                  &:not(:first-of-type) {
                      margin-top: $standard-spacing;
                  }
                  &::before {
                      display: none;
                  }
              }
              &:not(.criterion-group) {
                  margin-bottom: $standard-spacing;
              }

              .criterion-detail {
                  border-left: 1px solid $rubrics-lightbox-border-color;
                  background-color: var(--sakai-background-color-3);
                  border-radius: 6px 6px 0 0;
                  width: 100%;
                  .add-criterion-item {
                      right: 0px;
                      top: 8px;
                  }
              }
              .criterion-ratings {
                  width: 100%;
                  margin-bottom: 0;
                  .cr-table,
                  .cr-table .cr-table-row {
                      @include display-flex;
                      @include flex-direction(column);
                      .rating-item {
                          border-bottom: 1px solid $rubrics-lightbox-border-color;
                          border-left: 1px solid $rubrics-lightbox-border-color;
                          &:last-of-type {
                              border-bottom: none;
                          }
                          .add-criterion-item {
                              right: 0px;
                              top: 8px;
                          }
                      }
                  }
              }
              .criterion-actions {
                  width: 100%;
                  text-align: center;
                  border-left: 1px solid $rubrics-lightbox-border-color;
                  border-right: 1px solid $rubrics-lightbox-border-color;
                  background-color: var(--sakai-background-color-3);
                  border-radius: 0 0 6px 6px;
                  > * {
                      margin: 0px 8px;
                  }
              }
          }
          &.grading {
              .criterion .criterion-row {
                  .criterion-ratings {
                      margin-bottom: 0;
                  }
                  .criterion-actions {
                      @include display-flex;
                      @include flex-direction(row-reverse);
                      @include align-items(center);
                      .rubric-grading-points-value {
                          flex: 1;
                      }
                  }
              }
          }
      }
  }
}

/* Apply small screen layout when container width is less than break-small-end */
@container (width < #{$break-small-end}) {
  @include small_screen_rubric_layout;
}

/* Apply small screen layout on mobile devices */
@media #{$phone} {
  @include small_screen_rubric_layout;
}
